<template>
	<div class="check-listset">
		<div class="mb-10">
			<eagle-input
				label="巡检路线名称"
				v-model="PatrolRouteName"
				required
				:border="false"
				isInputText
			></eagle-input>
		</div>

		<div class="det_tab_item">
			<div class="operate_det">
				<eagle-input
					label="检查区域"
					required
					readonly
					:border="false"
				>
					<template #extra>
						<div class="add-check" @click="chooseTask()">添加检查点</div>
					</template>
				</eagle-input>
				<div class="operate_list" v-if="Details3.length">
					<eagle-row class="operate_row_first">
						<eagle-col span="4">类别</eagle-col>
						<eagle-col offset="1" span="10">检查表名称</eagle-col>
					</eagle-row>

					<eagle-row class="operate_row" v-for="(v, i) in Details3" :key="i">
						<eagle-col span="24">
							<eagle-row>
								<eagle-col span="5"> 风险位置 </eagle-col>
								<eagle-col span="17">
									<div class="mb-5">检查区域：{{ v.CheckArea }}</div>
									<div>检查表：{{ v.TNames || '无' }}</div>
								</eagle-col>
								<eagle-col span="2"> </eagle-col>
							</eagle-row>
							<eagle-divider />

							<eagle-row class="mt-10">
								<eagle-col offset="6" span="18">
									<eagle-row>
										<eagle-col span="9">
											<div @click="lookMyCheckListSet(v, i)">
												<img
													class="operation-imgs"
													src="@/assets/Images/AppIcon/icon_list_verify.png"
												/>设置检查表
											</div>
										</eagle-col>
										<eagle-col span="5">
											<div @click="up(i)">
												<img
													class="operation-imgs"
													src="@/assets/Images/AppIcon/icon_list_up.png"
												/>上移
											</div>
										</eagle-col>
										<eagle-col span="5">
											<div @click="down(i)">
												<img
													class="operation-imgs"
													src="@/assets/Images/AppIcon/icon_list_down.png"
												/>下移
											</div>
										</eagle-col>
										<eagle-col span="5">
											<div @click="del(i)">
												<img
													class="operation-imgs"
													src="@/assets/Images/AppIcon/icon_list_delete.png"
												/>删除
											</div>
										</eagle-col>
									</eagle-row>
								</eagle-col>
							</eagle-row>
						</eagle-col>
					</eagle-row>
				</div>
			</div>
		</div>
		<div style="padding: 10px">
			<eagle-button type="primary" style="width: 100%" @click="save"
				>确定</eagle-button
			>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			PatrolRouteName: '',
			form: {},
			Details3: [],
			TCodes: '',
			TNames: '',
			idx: '',
			id: '',
		}
	},
	activated() {
		if (this.$route.params.Details3) {
			this.Details3 = this.Details3.concat(this.$route.params.Details3)
		}
		if (this.$route.query.id) {
			this.getInspectionDetail()
		}
		console.log(this.$route.params.data, '(this.$route.params.data')
		if (this.$route.params.data) {
			const data = this.$route.params.data.Details3.join(',')
			const TCodes = this.$route.params.data.TCodes
			const idx = this.$route.params.data.idx

			this.Details3.forEach((item, index) => {
				if (index == idx) {
					item.TNames = data
					item.TCodes = TCodes
				}
			})
			this.$set(this.Details3, this.Details3)
			console.log(this.Details3, 'this.Details3')
		}
	},
	beforeRouteLeave(to, from, next) {
		if (to.name == 'InspectionWay') {
			this.PatrolRouteName = ''
			this.Details3 = []
		}
		next()
	},
	methods: {
		// 详情
		getInspectionDetail() {
			let _this = this;
			_this.$axios
      			.get("/DangerPatrolRoute/GetDetail",{params:{ id: _this.$route.query.id }})
			 	.then((res)=>{
					_this.PatrolRouteName = res.data.PatrolRouteName
					_this.Details3 = res.data.Details
					_this.id = _this.$route.query.id
				 })
		},
		// 确认
		save() {
			if (!this.PatrolRouteName) {
				return this.$toast('巡检路线名称不能为空')
			}
			if (this.Details3.length < 1) {
				return this.$toast('检查区域不能为空')
			}
			const data = {
				ID: 0,
				PatrolRouteName: this.PatrolRouteName,
				Details: this.Details3,
			}
			let _this = this;
			_this.$axios
      			.get("/DangerPatrolRoute/Add",{params:data})
				.then((res)=>{
					_this.$router.push('/OtherDanger/InspectionWay')
				})
		},
		// 添加检查点
		chooseTask() {
			if (this.id) {
				this.$toast('不允许编辑')
				return
			}
			this.$router.push({
				name: 'ChooseDangerArea',
				params: {
					path: 'AddInspectionWay',
				},
			})
		},
		// 设置检查表
		lookMyCheckListSet(item, idx) {
			if (this.id) {
				this.$router.push({
					name: 'MyCheckListSet',
					params: {
						path: 'EditInspectionWay',
						item: item,
						idx: idx,
					},
				})
			} else {
				this.$router.push({
					name: 'MyCheckListSet',
					params: {
						path: 'AddInspectionWay',
						item: item,
						idx: idx,
					},
				})
			}
		},
		/* 上移 */
		up(index) {
			if (this.Details3.length > 1 && index !== 0) {
				this.Details3 = this.swapItems(this.Details3, index, index - 1)
			}
		},
		// 下移
		down(index) {
			if (this.Details3.length > 1 && index !== this.Details3.length - 1) {
				this.Details3 = this.swapItems(this.Details3, index, index + 1)
			}
		},
		swapItems(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0]
			return arr
		},
		// 删除
		del(index) {
			this.Details3.splice(index, 1)
		},
	},
}
</script>

<style lang="less" scoped>
.check-listset {
	background-color: #e8f1f8;
	min-height: 100vh;
}
.det_tab_item {
	padding: 10px 0;
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;

	.det_tab_item_text {
		padding: 0 10px;
	}
}

.add-check {
	color: rgb(0, 92, 128);
}
.operate_det {
	background-color: #fff;
	.operate_list {
		font-size: 12px;
		border: 1px solid #e8f1f8;
		.operate_row_first {
			padding: 10px;
			background-color: #e8f1f8;
			border-bottom: 1px solid #e8f1f8;
			margin-bottom: 10px;
		}
		.operate_row {
			padding: 10px;
			border-bottom: 1px solid #e8f1f8;
			/*margin-bottom: 10px;*/
		}
	}
}
.operation-imgs {
	width: 15px;
	height: 15px;
	vertical-align: middle;
	margin-right: 5px;
}
</style>